<%--
  Created by IntelliJ IDEA.
  User: Teng Dong
  Date: 2020/4/3
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
    <meta charset="UTF-8">
    <title>多条件搜索界面</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/product/all_search.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="external nofollow" rel="external nofollow" >
    <link rel="stylesheet" href="/resources/demos/style.css" rel="external nofollow" >
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
<div class="q_header q_header_package">
    <div class="mymain">
        <div class="q_header_main" data-hfchannel="package" data-hffile="header_main">
            <div class="q_header_logo"><a href="" target="_top" hidefocus="on">
                <img src="${pageContext.request.contextPath}/images/logo.svg"></a></div>
            <div class="p_nav">
                <div class="p_nav_ct">
                    <ul>
                        <li class="deactve home"><a href="/index.jsp" hidefocus="on"
                                                    wc-clk="index">度假首页</a></li>
                        <li class="deactve fh agio"><a href="" target="_blank"
                                                       wc-clk="fh">自由行</a><i class="icon"></i></li>
                        <li class="deactve surrounding"><a href=""
                                                           hidefocus="on" wc-clk="around">周边游</a></li>
                        <li class="deactve c2b"><a href="/custom/custom" hidefocus="on"
                                                   target="_blank" wc-clk="c2b">包团·定制</a><i class="icon"></i></li>
                    </ul>
                </div>
            </div>
            <div class="q_header_tnav">
                <ul>
                    <c:if test="${empty loginCustomer}">
                        <li id="__loginInfo_u__" class="q_header_username">
                            <span>请</span>
                            <a id="__headerInfo_login__"
                               href="/customer/login.jsp"
                               hidefocus="on" rel="nofollow">登录</a>
                        </li>
                        <li id="__loginInfo_r__" class="q_header_register">
                            <span>或</span>
                            <a id="__headerInfo_reg__"
                               href="/customer/register.jsp"
                               hidefocus="on"
                               rel="nofollow">免费注册</a></li>
                    </c:if>
                    <c:if test="${not empty loginCustomer}">

                        <li  class="q_header_username">
                            <span>欢迎您</span>
                            <a href=""
                               hidefocus="on" rel="nofollow">${loginCustomer.customerName}</a>
                        </li>
                        <li  class="q_header_register">
                            <span>     </span>
                            <a href="/customer/out"
                               hidefocus="on"
                               rel="nofollow" class="out">退出</a></li>

                    </c:if>

                </ul>
            </div>
        </div>
    </div>
</div>



<div class="search-input">
    <div class="conbox">
        <div class="search-city">
            <span class="icon-address"></span>
            <span class="city-name">徐州</span><span class="city-text">站</span>
            <span class="city-select"></span>
        </div>

        <div class="search-key">
            <div class="search-info">
                <input id="tags" type="text" class="search-key-input" placeholder="请输入目的地、主题或关键词" value="${kw}">
                <span class="search-btn">搜索</span>
            </div>
            <div class="search-hot">
                <span class="search-hot-tit">正在热搜：</span>
                <a href="javascript:;" class="search-hot-text">三亚</a>
                <a href="javascript:;" class="search-hot-text">海南</a>
                <a href="javascript:;" class="search-hot-text">故宫</a>
                <a href="javascript:;" class="search-hot-text">上海</a>
                <a href="javascript:;" class="search-hot-text">长城</a>
                <a href="javascript:;" class="search-hot-text">九寨沟</a>
                <a href="javascript:;" class="search-hot-text">南京</a>
                <!--<a href="" class="search-hot-text">张家界</a>-->
            </div>
        </div>
    </div>
    <div class="condition" onclick="selected(event)">
        <ul class="condition-first">
            <li><span>出行方式：</span>
                <ul class="condition-second">
                    <li>不限</li>
                    <li>跟团游</li>
                    <li>自由行</li>
                </ul><br>
            </li>
            <li><span>游玩天数：</span>
                <ul class="condition-second">
                    <li>不限</li>
                    <li>3天</li>
                    <li>4天</li>
                    <li>5天</li>
                    <li>6天</li>
                    <li>7天</li>
                    <li>8天</li>
                    <li>10天以上</li>
                </ul><br>
            </li>
            <li><span>出发城市：</span>
                <ul class="condition-second">
                    <li>不限</li>
                    <li class="local-city">国企</li>
                    <li>上海</li>
                    <li>北京</li>
                    <li>南京</li>
                </ul><br>
            </li>
            <li><span>出发时间：</span>
                <ul class="condition-second">
                    <li>不限</li>
                    <li>5月</li>
                    <li>6月</li>
                    <li>7月</li>
                    <li>五一</li>
                    <li>端午节</li>
                </ul><br>
            </li>
            <li><span>游玩特色：</span>
                <ul class="condition-second">
                    <li>不限</li>
                    <li>热带雨林</li>
                    <li>日光沙滩</li>
                    <li>美食之旅</li>
                    <li>网红打卡</li>
                    <li>历史熏陶</li>
                    <li>民俗风情</li>
                </ul><br>
            </li>
            <li><span>价格预算：</span>
                <ul class="condition-second">
                    <li>不限</li>
                    <li>1001元-2000元/人</li>
                    <li>2001元-3000元/人</li>
                    <li>3001元-4000元/人</li>
                    <li>4001元-5000元/人</li>
                    <li>5000元以上/人</li>
                </ul><br>
            </li>
        </ul>
    </div>
    <div class="condition-show">
        <span>已选条件：</span><input type="text" class="condition-selected" disabled="disabled">
        <a href="javascript:;" class="condition-show-clear">清空</a>
    </div>

</div>
<div class="search-result">
    <div class="search-sort">
        <nav class="navbar navbar-default navstyle" role="navigation">
            <div class="container-fluid">
                <div>
                    <ul class="nav navbar-nav">
                        <li ><a href="javascript:;" class="sort-byName-asc">综合排序</a></li>
                        <li><a href="javascript:;" class="sort-bySales-desc">销量优先</a></li>
                        <li><a href="javascript:;" class="sort-byStar-desc">好评优先</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                价格排序
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;" class="sort-byPrice-asc">价格升序</a></li>
                                <li><a href="javascript:;" class="sort-byPrice-desc">价格降序</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <ul class="list-group result-list">

    </ul>
    <ul class="pagination pagination-lg page-div">
        <li><a href="javascript:;" class="prePage">&laquo;</a></li>
        <li><a href="javascript:;" class="pageNum">1</a></li>
        <li><a href="javascript:;" class="nextPage">&raquo;</a></li>
       <li><a href="javascript:;" class="pages">0</a></li>
     <li><a href="javascript:;" class="total">0</a></li>
    </ul>

</div>


<script>
    $( function() {
        var availableTags = [//这里要改成根据用户的输入,自动更换词库的形式
            "海南",
            "三亚",
            "上海",
            "杭州",
            "苏州",
            "南京",
            "无锡",
            "水乡",
            "周庄",
            "总统府",
            "中山陵",
            "夫子庙",
            "南京博物院",
            "大报恩寺",
            "狮子林",
            "龙虎山",
            "常州",
            "无锡",
            "热带风情",
            "水乡",
            "金陵",
            "乌镇",
            "嘉兴",
            "沙滩",
            "热带风情",
            "日光浴",
            "夜游",
            "度假",
            "网红",
            "三国城",
            "表演",
            "湖光山色"
        ];
        $( "#tags" ).autocomplete({//调用补全功能
            source: availableTags
        });
    } );
</script>



<script src="${pageContext.request.contextPath}/js/product/all_search.js"></script>
</body>
</html>
